import React, {useState, useEffect} from 'react';
import {View,Image,Text,ScrollView} from '@tarojs/components';
import Taro from '@tarojs/taro';
import './CommodList.scss';
import {navs} from '../../static/data';
import data from './CommodListData.js';//假数据

//商品列表接口
interface ComSt{
  id:number,    //商品ID
  url:string, //展示图路径
  name:string, //商品名称
  money:number, //商品价格
  type:string , //商品类型
  scale:number,//商品相似度
};

//加载的页码和数量 接口
interface PageConfig{
  pageSize:number, //一次加载的数量
  pageNum:number, //当前加载的页码
}


const pageSize = 10;

const CommodList:React.FC = () => {
  const [commodList,setCommodList] = useState<ComSt[]>([]);  //商品信息列表
  const [loadPageInfo,setLoadPageInfo] = useState<PageConfig>({pageSize:pageSize,pageNum:0}); //加载的数量和页码
  const [currentNavIndex,setCurrentNavIndex] = useState<number>(0);
  // const [navs,setNavs] = useState<String[]>([]);//导航栏

  //发送请求
  useEffect(() => {
    console.log(data)
    setCommodList(data);
  },[])

  // 跳转详情页面
  const targetCommodDetails = (id:number) => {
    return () => {
      Taro.navigateTo({url:`/pages/CommodDetails/CommodDetails?id=${id}`})
    }
  }

  //下拉加载更多
  const bottomLoadMore = ()  => {
       setLoadPageInfo(() => {
         loadPageInfo.pageNum = Number(loadPageInfo.pageNum) +1;
         console.log(loadPageInfo.pageNum);
         return loadPageInfo;
       });

    // eslint-disable-next-line @typescript-eslint/no-shadow
    setCommodList(commodList => {
      return [...commodList,...commodList];
    })

  }

  //切换模块
  const toggleNav = (navIndex:number) => {
    return () => {
      setCurrentNavIndex(navIndex);
      setLoadPageInfo({pageSize:pageSize,pageNum:1});

      const navItemTitle = navs[navIndex];
      if(navItemTitle === '全部'){
        const temList = data;
        console.log(temList);
        setCommodList(temList);
        return temList;
      }else{
        setCommodList(() => {
          const temList = data.filter(item => {
            if(item.type.indexOf(navItemTitle) !== -1){
              return item;
            }
          })
          console.log(temList);
          return [...temList];
        })
      }
    }
  }

  return (
    <>
      <View className='commodListRoot'>
        {/*<ScrollNav*/}
        {/*  toggleNavData={toggleNavData}*/}
        {/*  currentPage={currentPage}*/}
        {/*  navs={navs}>*/}
        {/*</ScrollNav>*/}
        <ScrollView style='' className='navsBox' scrollY>
          {
            navs.map((item,index) => {
              return <View className={`navItem ${currentNavIndex == index?'activeNav':''}`} onClick={toggleNav(index)}>{item}</View>
            })
          }
        </ScrollView>
        <ScrollView onScrollToLower={bottomLoadMore} scrollY style='height:100%;width:260px'>
          {
            commodList.map((item) => {
              return <View className='commItem' key={item.id}>
                <View className='imageBox'>
                  <Image
                    className='image'
                    mode='widthFix'
                    src={String(item.url)}
                    // src='https://img01.yzcdn.cn/upload_files/2021/09/15/Fld9RZaseW0B7nqjV_gI2gwdwJdd.jpg!large.webp'
                  />
                  <View className='scale'>
                    相度{item.scale}%
                  </View>
                </View>

                <View style='display:flex;justify-content:space-between;width:380px;flex-direction:column;'>
                  <View>
                    <View className='commodName'>{item.name}</View>
                    <View className='commodDescr'>{item.type?item.type:'本上坪暂无类型描述'}</View>
                  </View>
                  <View className='commodBot'>
                    <Text className='money'>￥{item.money}</Text>
                    <View className='goShopping' onClick={targetCommodDetails(item.id)}>购买</View>
                  </View>
                </View>
              </View>
            })
          }
        </ScrollView>
      </View>
    </>
  )
}

export default CommodList;
